<template>
  <div id="main" />
</template>

<script>
// 完整引入echarts
import * as echarts from 'echarts'

export default {
  mounted() {
    // 之所以在mounted中调用是因为 mounted钩子在dom挂载完毕时调用 , 可以操作dom了
    this.initEchars()
  },
  methods: {
    // 初始化雷达图
    initEchars() {
      const chartDom = document.getElementById('main')
      const myChart = echarts.init(chartDom)
      const option = {
        legend: {
          data: ['张飞', '刘备']
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: 'js', max: 100 },
            { name: 'vue', max: 100 },
            { name: 'react', max: 100 },
            { name: 'project', max: 100 },
            { name: 'firends', max: 100 },
            { name: 'money', max: 30000 }
          ]
        },
        splitArea: {
          show: true
        },
        color: ['red', 'orange'],
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: [90, 80, 90, 90, 80, 18000],
                name: '张飞'
              },
              {
                value: [50, 50, 50, 50, 50, 21000],
                name: '刘备'
              }
            ]
          }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>

<style scoped lang="scss">
#main {
  width: 750px;
  height: 350px;
  text-align: center;
}
</style>
